<template>
  <div class="data-statistics-content">
    <div class="m-card-container">
      <div
        class="m-card-content"
        v-for="(item, index) in mCardList"
        :key="index"
        @click="handleCard(item, index)"
        :style="{ background: cardClickObj.index === index ? '#eef6fa' : '' }"
      >
        <div style="font-size: 20px; color: black; margin-bottom: 10px">{{ item.title }}</div>
        <div class="m-card-text-content">
          <div class="m-card-content__item">
            {{ item.content }}
          </div>
          <img style="width: 50px; height: 50px; margin-left: 20px" :src="item.img" alt="" />
        </div>
      </div>
    </div>
    <oneIndex v-if="cardClickObj.index === 0" style="margin-top: 20px;" />
    <moreIndex v-if="cardClickObj.index === 1" style="margin-top: 20px;" />
  </div>
</template>
<script setup>
import oneIndex from './oneIndex.vue';
import moreIndex from './moreIndex.vue';
import { getDetail } from '@/api/trial/trial';
import { useStore } from 'vuex';
import { ref, reactive, computed, onMounted, nextTick } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();
const crud = ref(null);
const store = useStore();
const selectTab = ref(1);
const routerQuery = ref({});
routerQuery.value = route.query;

let cardClickObj = ref({
  item: {},
  index: 0,
});
// 顶部卡片点击事件
const handleCard = (item, index) => {
  cardClickObj.value.item = item;
  cardClickObj.value.index = index;
};

let mCardList = ref([
  {
    title: '单指标可视化',
    content: '可自定义设定单个项目指标进行统计，并对统计结果进行可视化展示，且可实时查看数据变化',
    img: '/public/img/pie_chart.png',
  },
  {
    title: '多指标可视化',
    content: '可自定义设定多个项目指标进行统计，并对统计结果进行可视化展示，且可实时查看数据变化',
    img: '/public/img/visualization.png',
  },
]);
</script>
<style scoped lang="scss">
.data-statistics-content {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.m-card-container {
  width: 100%;
  height: auto;
  display: flex;
}
.m-card-content {
  width: 300px;
  height: 100px;
  padding: 10px 20px;
  margin-right: 30px;
  border: whitesmoke 1px solid;
  border-radius: 5px;
  // background: #eef6fa;
  box-shadow: 1px 1px 3px #909090;
  cursor: pointer;
}
.m-card-text-content {
  width: 100%;
  height: auto;
  /* padding: 10px; */
  display: flex;
  align-items: center;
}
.m-card-content__item {
  width: 80%;
  height: auto;
  word-wrap: break-word;
  font-size: 12px;
}
</style>